<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#canvas{
				display: block;
				margin: 0 auto;
				box-shadow: 0 0 10px rgba(0,0,0,0.5);
			}
		</style>
	</head>
	<body>
		<canvas id="canvas"></canvas>
		<script src="../libs/utils.js"></script>
		<script type="text/javascript">
			class Ball {
				constructor(props) {
					this.x = 0;
					this.y = 0;
					this.r = 25;
					this.scaleX = 1;
					this.scaleY = 1;
					this.fillStyle = 'rgba(65,168,99,1)';
					this.strokeStyle = 'rgba(0,0,0,0)';
					Object.assign(this,props)
					return this
				}
				render(ctx){
					var {x,y,r,fillStyle,strokeStyle,scaleX,scaleY} = this
					// 保存绘图环境
					ctx.save()
					// 将画布坐标移动到x，y
					ctx.translate(x,y)
					ctx.scale(scaleX,scaleY) 
					ctx.fillStyle = fillStyle;
					ctx.strokeStyle = strokeStyle;
					ctx.beginPath()
					ctx.arc(0,0,r,0,2*Math.PI,false)
					ctx.fill()
					ctx.stroke()
					// 恢复绘图环境
					ctx.restore()
					return this
				}
			}
		</script>
		<script type="text/javascript">
			var canvas = document.querySelector('#canvas')
			var ctx = canvas.getContext('2d');
			
			var w = canvas.width = 500;
			var h = canvas.height = 300
			// 弧度
			var rad = 0;
			// 圆环半径
			var cr = 100;
			// 绘制小圆
			var ball =new Ball({x:w/2+cr,y:h/2,r:10}).render(ctx);
			// 自执行函数
			(function move(){
				window.requestAnimationFrame(move)
				ctx.clearRect(0,0,w,h)
				drawSystem()
				drawCircle()
				rad+=0.02
				// 通过sin,cos计算出y,x坐标
				// var y = Math.sin($C.toAngle(rad) * Math.PI / 180) * cr
				// var x = Math.cos($C.toAngle(rad) * Math.PI / 180) * cr
				// 通过极坐标表达式:
				var y = Math.sin(rad) * cr;
				var x = Math.cos(rad) * cr;
				// 由于小球的圆心在中心点,所以x,y还需要加上中心点的坐标
				ball.x = w/2 +x;
				ball.y = h/2 +y;
				ball.render(ctx)
				
			})()
			// 绘制圆环
			function drawCircle(){
				ctx.save()
				ctx.translate(w/2,h/2);
				ctx.strokeStyle ='rgba(0,0,0,0.5)'
				ctx.beginPath()
				ctx.arc(0,0,cr,0,2*Math.PI,false)
				ctx.stroke()
				ctx.restore()
			}
			// 绘制坐标系
			function drawSystem(){
				ctx.save()
					ctx.beginPath()
					ctx.lineWidth = 1.5
					ctx.strokeStyle='red'
					ctx.moveTo(0,h/2)
					ctx.lineTo(w,h/2)
					ctx.moveTo(w/2,0)
					ctx.lineTo(w/2,h)
					ctx.stroke()
				ctx.restore()
			}
		</script>
	</body>
</html>
